<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<head>
    <meta charset="UTF-8" content="text/html">
    <!--防止乱码-->
    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
    <title>Title</title>
</head>
<body>
<div align="center">
    <form action="/RegisterServlet" method="post" class="form-horizontal" style="width: 900px;"
          onsubmit="return check();">
        <table class="table table-hover table-bordered">
            <tr>
                <td colspan="3" align="center" height="60px" bgcolor="#87ceeb" style="font-size: 30px">用户注册</td>
            </tr>
            <tr>
                <td rowspan="8" align="center" width="500px" height="330px" background="../images/img.png"></td>
                <td><label class="col-sm-8 control-label">账号</label></td>
                <td><input type="text" name="name" id="111" class="form-control" placeholder="账号"></td>
            </tr>
            <tr>
                <td><label class="col-sm-8 control-label">头像</label></td>
                <td><select id="images" name="image" onchange="show()">
                    <option value="01.png">image1</option>
                    <option value="02.png">image2</option>
                    <option value="03.png">image3</option>
                    <option value="04.png">image4</option>
                </select> <img src="../images/01.png" alt="" width="32" height="32"></td>
            </tr>

            <tr>
                <td><label class="col-sm-8 control-label">密码</label></td>
                <td><input type="password" id="222" name="password" class="form-control" placeholder="密码"></td>
            </tr>
            <tr>
                <td><label class="col-sm-10 control-label">确认密码</label></td>
                <td><input type="password" id="333" class="form-control" placeholder="确认密码"></td>
            </tr>
            <tr>
                <td><label class="col-sm-10 control-label">电子邮箱</label></td>
                <td><input type="text" id="444" name="email" class="form-control" placeholder="email"></td>
            </tr>
            <tr>
                <td><label class="col-sm-8 control-label">性别</label></td>
                <td><input type="radio" checked name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                    <input type="hidden" name="flag" value="0"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="hidden" name="flag" value="0">
                    <input type="submit" name="submit" id="11" value="提交" class="btn btn-default">
                    <input type="reset" name="reset" id="22" value="重填" class="btn btn-default">
                </td>
            </tr>

        </table>
    </form>
</div>
<script>
    function check() {
        var Name = document.getElementById("111").value;
        var PWD = document.getElementById("222").value;
        var PWD1 = document.getElementById("333").value;
        var EMAIL = document.getElementById("444").value;
        // var options=document.getElementById("555");
        if (Name == "") {
            alert("请输入用户名！！")
            return false;
        }
        if (PWD == "") {
            alert("请输入密码！！")
            return false;
        }
        if (PWD != PWD1) {
            alert("两次输入的密码不同！！")
            return false;
        }
        var regex = /^\w+@[a-z0-9]+.[a-z]{2,4}$/;
        if (EMAIL == "") {
            alert("请输入邮箱！！");
            return false;
        } else if (!regex.test(EMAIL)) {
            alert("邮箱格式不合法");
            return false;
        }


    }

    function show() {
        var image = ["../images/01.png", "../images/02.png", "../images/03.png", "../images/04.png"];
        var img = document.images[0];
        var select = document.getElementById("images");
        if (select.value == "01.png") {
            img.src = image[0];
        }
        if (select.value == "02.png") {
            img.src = image[1];
        }
        if (select.value == "03.png") {
            img.src = image[2];
        }
        if (select.value == "04.png") {
            img.src = image[3];

        }
        var src = $('#image').attr('src');

    }


</script>
</body>
</html>